import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
// import { CommonEvent } from '@tarojs/components/types/common'
import { AtImagePicker, AtButton } from 'taro-ui'
import { View } from '@tarojs/components'
import CommonForm from '../../components/common-form'

class formPreStep2 extends Component {

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  public state: any = {
    parentsInfo: [
      {
        type: 'input',
        title: '父亲姓名',
        value: ''
      },
      {
        type: 'input',
        title: '职业',
        value: ''
      },
      {
        type: 'input',
        title: '手机号',
        value: ''
      },
      {
        type: 'select',
        title: '文化程度',
        option: ['请选择', '小学', '初中', '高中', '本科', '硕士', '博士', '文盲'],
        value: 0
      },
      {
        type: 'input',
        title: '母亲姓名',
        value: ''
      },
      {
        type: 'input',
        title: '职业',
        value: ''
      },
      {
        type: 'input',
        title: '手机号',
        value: ''
      },
      {
        type: 'select',
        title: '文化程度',
        option: ['请选择', '小学', '初中', '高中', '本科', '硕士', '博士', '文盲'],
        value: 0
      },
      {
        type: 'input',
        title: '当前居住地区当前居住地区当前居住地区当前居住地区当前居住地区当前居住地区当前居住地区', // TODO: 多级联动选择城市
        value: ''
      },
      {
        type: 'select',
        title: '家庭年收入',
        option: ['请选择', '低于5万元', '5-10万元', '10-20万元', '20-40万元', '超过40万元'],
        value: 0
      },
    ],
    transplantInfo: [
      {
        type: 'select',
        title: '如需肝移植，希望供肝来源',
        option: ['请选择', '亲体供肝', '社会爱心捐肝', '无法决定'],
        value: 0
      },
      {
        type: 'select',
        title: '您了解儿童肝移植程度',
        option: ['请选择', '非常了解', '了解一大部分', '了解一小部分', '完全不了解'],
        value: 0
      },
      {
        type: 'select',
        title: '是否愿意捐献部分肝脏供患儿移植',
        option: ['请选择', '非常愿意', '愿意', '不愿意', '不知道'],
        value: 0
      },
      {
        type: 'select',
        title: '您认为捐肝后，肝脏需多久恢复到原有大小',
        option: ['请选择', '3 - 6个月', '6 - 12个月', '1 - 2年', '无法再生'],
        value: 0
      },
      {
        type: 'multiSelect',
        title: '捐献部分肝脏后，您最担心造成自身哪些影响（最多选三项）', // TODO
        option: [
          { label: '无法从事原有工作', value: 1 },
          { label: '生活质量明显下降', value: 2 },
          { label: '无法再次生育', value: 3 },
          { label: '严重影响美观', value: 4 },
          { label: '影响性功能', value: 5 },
          { label: '需要长期服药', value: 6 },
          { label: '肝脏无法恢复正常', value: 7 },
          { label: '体质会变差，经常生病', value: 8 },
          { label: '其他', desc: '选择后请手动输', value: 9 },
        ],
        value: ''
      },
      {
        type: 'multiSelect',
        title: '患儿肝移植后，您最担心哪些问题（最多选三项）', // TODO
        option: [
          { label: '宝宝太小，无法渡过手术关', value: 1 },
          { label: '宝宝无法像正常小孩一样生活，学习', value: 2 },
          { label: '宝宝无法长期存活', value: 3 },
          { label: '宝宝需要长期服药', value: 4 },
          { label: '宝宝智力发育会受影响', value: 5 },
          { label: '宝宝体质会比其他小孩差', value: 6 },
          { label: '宝宝将来无法生育', value: 7 },
          { label: '宝宝原有的疾病会复发', value: 8 },
          { label: '后续治疗家庭经济负担较重', value: 9 },
          { label: '宝宝会有心理缺陷', value: 10 },
          { label: '照顾移植后的宝宝会很难', value: 11 },
          { label: '其他（手动输入）', value: 12 },
        ],
        value: ''
      },
      {
        type: 'select',
        title: '您现在最急需得到怎样的帮助', // TODO
        option: ['请选择', '经济资助', '专科医师的专业建议', '精湛的医疗技术', '家人的理解和支持', '心理辅导', '其他（手动输入）'],
        value: 0
      },
      {
        type: 'select',
        title: '您是否愿意加入我们的公益组织，和我们一起帮助全国更多的患儿',
        option: ['请选择', '愿意', '不愿意', '不知道'],
        value: 0
      },
      {
        type: 'longInput',
        title: '您对我们有哪些意见和建议',
        value: ''
      },
    ]
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  config: Config = {
    navigationBarTitleText: '患儿父母信息'
  }

  render () {
    return (
      <View className='page'>        
        <View className='doc-body'>
          {/* 患儿父母情况 */}
          <View className='panel'>
            <View className='panel__title'>患儿父母情况</View>
            <View className='panel__content no-padding'>
              <CommonForm 
                data={this.state.parentsInfo}
              />
            </View>
          </View>
          {/* 肝移植相关情况 */}
          <View className='panel'>
            <View className='panel__title'>肝移植相关情况</View>
            <View className='panel__content no-padding'>
              <CommonForm
                data={this.state.transplantInfo}
              />
            </View>
          </View>
          {/* 提交按钮 到下一步 */}
          <AtButton 
            type='primary' 
            onClick={()=>{
              console.log('~')
            }}
          >提交</AtButton>
        </View>
      </View>
    )
  }
}

export default formPreStep2 as ComponentClass<PageOwnProps, PageState>
